<template>
  <div class="wrapper">
    <div
      style="
        margin: 200px auto;
        background-color: #fff;
        width: 350px;
        height: 300px;
        padding: 20px;
        border-radius: 10px;
      "
    >
      <div style="margin: 20px 0; text-align: center; font-size: 24px">
        <b>登 录</b>
      </div>
      <el-form :model="user" ref="userForm" :rules="rules">
        <el-form-item prop="username">
          <el-input
            size="medium"
            style="margin: 10px 0"
            prefix-icon="user"
            v-model="user.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            size="medium"
            style="margin: 10px 0"
            prefix-icon="lock"
            show-password
            v-model="user.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="margin: 10px 0; text-align: right">
        <el-button
          type="warning"
          size="small"
          aria-autocomplete="off"
          @click="this.$router.push('/register')"
          >注册</el-button
        >
        <el-button
          type="primary"
          size="small"
          aria-autocomplete="off"
          @click="login"
          >登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { setRoutes } from "@/router";

export default {
  data() {
    return {
      user: {},
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "长度为: 3 to 10",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 3,
            max: 10,
            message: "长度为: 3 to 10",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      //获取公网ip
      // this.request("/user/getip").then((res) => {
      //   if (!res) {
      //     this.$message.error("获取ip失败!");
      //   } else {
      //     console.log(res);
      //     //this.$message.success(res.data);
      //   }
      // });

      this.$refs["userForm"].validate((valid) => {
        if (!valid) {
          console.log("error submit!!");
          return false;
        } else {
          //alert("submit!");
          this.request.post("/user/login", this.user).then((res) => {
            if (res.code === "200") {
              localStorage.setItem("user", JSON.stringify(res.data)); //存储用户信息到浏览器
              localStorage.setItem("menus", JSON.stringify(res.data.menus)); //存储用户角色菜单数据
              this.$message.success("登录成功!");

              // setRoutes() 动态设置当前用户的路由
              setRoutes();
              this.$router.push("/");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #fc466b, #3f5efb);
  overflow: hidden;
}
</style>
